<template>
    <div class="box-group-wrap">
        <p class="title">
            <span style="width: 85%;">非客服渠道服务历史</span>
        </p>
        <!-- <div class="line"></div> -->
        <div v-if="tableData.length === 0" class="nodatalist">
            <img src="@/assets/img/khindex/nuMessage.png" alt width="40px" />
            <p>暂无信息</p>
        </div>
        <div v-else class="trainingMain">
            <el-scrollbar wrap-class="side-bar-scrollbar-wrap">
                <ul>
                    <li class="headTitle">
                        <b>渠道</b>
                        <b>用户名</b>
                        <b>最后登录时间</b>
                    </li>
                    <div class="listLine"></div>
                    <li v-for="(item,index) in tableData" :key="index">
                        <span class="blueCirle"></span>
                        <i
                            class="trainingServe"
                            :title="item.chnl"
                            style="width: 25%;"
                        >{{item.chnl}}</i>
                        <i
                            class="trainingServe"
                            :title="item.userId"
                            style="width: 30%;"
                        >{{item.userId}}</i>
                        <i
                            class="trainingServe"
                            :title="item.lastLoginTime"
                            style="width: 35%;"
                        >{{item.lastLoginTime}}</i>
                    </li>
                </ul>
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
    name: "wxinfos",
    data() {
        return {
            result1002: {},
            result1003: {},
            tableData: [],
        };
    },
    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'defaultParams',
        ]),
    },
    async mounted() {
        // await this.init();
    },
    methods: {
        // async init() {
        //     await this.getAppData();
        //     await this.getWxData();

        //     this.tableData = [{
        //         chnl: '信用卡app',
        //         userId: '',
        //         lastLoginTime: this.result1002.lastestLoginTime,
        //         //lastLoginTime: '2021-08-17 17:59:21',
        //     },
        //     {
        //         userId: this.result1003.openId,
        //         chnl: '微信公众号',
        //         //userId: 'test',
        //         lastLoginTime: '',
        //     }];
        // },
        async init() {
            await this.getAppData();
            await this.getWxData();
            this.tableData = [{
                chnl: '信用卡app',
                userId: '',
                lastLoginTime: this.result1002.lastestLoginTime,
                //lastLoginTime: '2021-08-17 17:59:21',
            },
            {
                userId: this.result1003.openId,
                chnl: '微信公众号',
                //userId: 'test',
                lastLoginTime: '',
            }];
            console.log("...............", this.tableData);
        },
        async getAppData() {
            // 设置请求参数 -- 1002 交易
            console.log("app查询条件：", this.cardInfo_3004.CUSTID);
            if (this.cardInfo_3004.CUSTID != '' && this.cardInfo_3004.CUSTID != undefined) {
                const appBody = {
                    idNo: this.cardInfo_3004.CUSTID, // 证件类型
                    //idNo: '342626197601094451',
                    //bankCode: '6440', // 起始日期
                };
                const params = JSON.parse(JSON.stringify(this.defaultParams));
                params.body.appHead.tranCode = '1002';
                params.body.appBody = appBody;

                // 跑 00001交易
                await this.$post.common.collectionTran(params).then((res) => {
                    this.pageLoading = false;
                    if (res.status === 200) { // 接口请求成功
                        // 
                        const result = JSON.parse(res.data.jsonRes);
                        console.log(result, 'result -- 1002');
                        if (result.sysHead.rspCd === '000000') {
                            this.result1002 = result.body.appBody.data;
                            //this.result1002.lastestLoginTime = '2021-08-17 17:59:21';
                            console.log("appinfo：", this.result1002);
                        }
                    }
                });
            }
        },

        async getWxData() {
            // 设置请求参数 -- 1002 交易
            console.log("app查询条件：", this.cardInfo_3004.CUSTID);
            if (this.cardInfo_3004.CUSTID != '' && this.cardInfo_3004.CUSTID != undefined) {
                const appBody = {
                    cardNum: this.cardInfo_3004.CARDNO, // 证件类型
                    //cardNum: '6226515050000803',
                    bankNum: '6440', // 银行号
                };
                const params = JSON.parse(JSON.stringify(this.defaultParams));
                params.body.appHead.tranCode = '1003';
                params.body.appBody = appBody;

                // 跑 00001交易
                await this.$post.common.collectionTran(params).then((res) => {
                    this.pageLoading = false;
                    if (res.status === 200) { // 接口请求成功
                        // 
                        const result = JSON.parse(res.data.jsonRes);
                        console.log(result, 'result -- 1003');
                        if (result.sysHead.rspCd === '000000') {
                            this.result1003 = result.body.appBody.data;
                            //this.result1003.openId = 'test';
                            console.log("wxinfo：", this.result1003);
                        }
                    }
                });
            }
        },
    }
};
</script>

<style scoped lang="scss">
.trainingMain {
    .HistortTime {
        float: right;
        margin-right: 15px;
    }
    .side-bar-scrollbar-wrap {
        max-height: 150px;
    }
    .headTitle {
        display: flex;
        b {
            flex: 1;
            text-align: center;
        }
    }
}

.trainDate {
    width: 31%;
}
.telzt {
    width: 20%;
}
.traintime {
    width: 44%;
}
.pagination {
    margin-top: 20px;
    text-align: right;
}
.showmore:hover {
    cursor: pointer;
}
</style>
